import { useState } from 'react';
import {
  ProFormText,
  ProFormSelect,
  ProFormRadio,
} from '@ant-design/pro-components';
import { Modal } from 'antd';
import { request } from 'umi';
import '@/pages/person/leave/leave.less';
export default function applyLeave() {
  // 申请主题
  const [itemName, setItemName] = useState('');
  // 员工名称
  const [aname, setAname] = useState('张研');
  // 员工部门
  const [department, setDepartment] = useState('总经办');
  // 员工岗位
  const [prodepartment, setProdepartment] = useState('总经理');
  // 考勤异常说明
  const [technological, setTechnological] = useState('');
  // 提示框
  const [isModalOpen, setIsModalOpen] = useState(false);
  // 异常类型
  const [attendanceType, setAttendanceType] = useState('漏刷卡');
  // 考勤时间
  const [attendanceTime, setAttendanceTime] = useState('');
  // 申请时间
  const [applyTime, setCancellationTime] = useState(getFormatDate(new Date()));
  // 提示文字
  const [keyWord, setKeyWord] = useState('');
  // 取消弹框
  const handleCancel = () => {
    setIsModalOpen(false);
  };
  // 标准时间
  function getFormatDate(defaultdate: any) {
    let date = defaultdate;
    let year = date.getFullYear();
    let month = date.getMonth() + 1;
    let day = date.getDate();
    let hour = date.getHours();
    let minutes = date.getMinutes();
    let seconds = date.getSeconds();
    month = month < 10 ? '0' + month : month;
    day = day < 10 ? '0' + day : day;
    hour = hour < 10 ? '0' + hour : hour;
    minutes = minutes < 10 ? '0' + minutes : minutes;
    seconds = seconds < 10 ? '0' + seconds : seconds;
    let currentDate =
      year +
      '-' +
      month +
      '-' +
      day +
      ' ' +
      hour +
      ':' +
      minutes +
      ':' +
      seconds;
    return currentDate;
  }
  // 点击保存
  const applySubmit = () => {
    if (!attendanceTime) {
      setIsModalOpen(true);
      setKeyWord('考勤时间');
    } else {
      const number = [
        'A',
        'B',
        'C',
        'D',
        'E',
        'F',
        'G',
        'H',
        'I',
        'G',
        'K',
        'U',
        'V',
        'W',
        'R',
        'S',
        'T',
        'O',
        'P',
        'Q',
        'N',
        'M',
        'Z',
        'X',
        'Y',
        'J',
      ];
      const math = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
      let num = '';
      for (let a = 0; a <= 4; a++) {
        num += number[Math.ceil(Math.random() * 25)];
      }
      num += String(new Date()).split(' ')[3];
      for (let a = 0; a <= 3; a++) {
        num += math[Math.ceil(Math.random() * 9)];
      }
      const body = {
        anumber: num,
        aname,
        department,
        prodepartment,
        attendanceTime,
        attendanceType,
        applyTime,
        dtype: '考勤',
        status: '未提交',
      };
      request('/api/ljf/attendanceLeave', {
        method: 'post',
        data: body,
      }).then((res: any) => {
        if (res.code === 200) {
          setIsModalOpen(true);
          setKeyWord('保存数据成功');
        }
      });
    }
  };
  return (
    <div className="applyLeave">
      <div className="applyleave">
        <button
          onClick={() => {
            applySubmit();
          }}
        >
          保存
        </button>
        <button>保存且新增</button>
        <button>草稿箱</button>
        <button>提交审批</button>
        <button>流程图</button>
        <button>导入</button>
      </div>
      <div className="applyLeaveContent applyLeaveContent0">
        <h1>初期收票</h1>
        <table className="table">
          <tbody>
            <tr>
              <td>
                <span>*</span> 单据主题：
              </td>
              <td>
                <ProFormText value={''} placeholder="" />
              </td>
              <td>
                <span>*</span> 单据编号：
              </td>
              <td>
                <ProFormText
                  width="md"
                  name="name"
                  disabled
                  value={''}
                  placeholder="保存后自动生成"
                />
              </td>
            </tr>
            <tr>
              <td>
                <span>*</span> 供应商名称：
              </td>
              <td>
                <ProFormText value={''} placeholder="" />
              </td>
              <td>
                <span>*</span> 供应商编号：
              </td>
              <td>
                <ProFormText value={''} placeholder="" />
              </td>
            </tr>
            <tr>
              <td>采购人员：</td>
              <td>
                <ProFormText name="day" value={''} placeholder="" />
              </td>
              <td>
                <span>*</span> 收票日期：
              </td>
              <td>
                <ProFormText name="applyTime" value={''} placeholder="" />
              </td>
            </tr>
            <tr>
              <td>收票金额：</td>
              <td>
                <ProFormText name="day" value={''} placeholder="" />
              </td>
              <td>
                <span>*</span> 税率：
              </td>
              <td>
                <ProFormText name="aname" value={''} placeholder="" />
              </td>
            </tr>
            <tr>
              <td>票据类型：</td>
              <td>
                <ProFormText
                  name="day"
                  value={'增值税普通发票'}
                  placeholder=""
                  disabled
                />
              </td>
              <td>
                <span>*</span> 发票号码：
              </td>
              <td>
                <ProFormText name="aname" value={''} placeholder="" />
              </td>
            </tr>
            <tr>
              <td>申请人：</td>
              <td>
                <ProFormText
                  name="aname"
                  disabled
                  value={aname}
                  placeholder=""
                />
              </td>
              <td>
                <span>*</span> 关联项目：
              </td>
              <td>
                <ProFormText name="aname" value={''} placeholder="" />
              </td>
            </tr>
            <tr></tr>
          </tbody>
        </table>
        <table className="table0">
          <tbody>
            <tr>
              <td colspan={9}>
                附件<button>批量上传</button>
              </td>
            </tr>
            <tr>
              <td>文件名称</td>
              <td>文件大小</td>
              <td>上传人</td>
              <td>上传时间</td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
            </tr>
          </tbody>
        </table>
      </div>
      <Modal
        className="modalopen"
        title="提示对话框"
        open={isModalOpen}
        onCancel={handleCancel}
        footer={null}
      >
        <div className="content">
          <span>i</span>
          <p>请输入{keyWord}</p>
        </div>
        <button onClick={handleCancel}>确定</button>
      </Modal>
    </div>
  );
}
